import { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Image } from '@tarojs/components'
import tipsImg from '@/utils/global'
import { staticUrl } from '@/utils'
import classnames from 'classnames'
import './index.scss'

const nearIcon = staticUrl('/img/index/near-icon.png')
const newIcon = staticUrl('/img/index/new-icon.png')

interface Props {
  list: IStore
  handleEvent?: any
  hideServerIcon?: boolean
  hideDistance?: boolean
}

export default class StoreListView extends Component<Props, any> {

  constructor () {
    super(...arguments)
  }

  UNSAFE_componentWillMount() { }

  componentDidMount() { }

  UNSAFE_componentWillReceiveProps(nextProps, nextContext) { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  componentDidCatchError() { }

  componentDidNotFound() { }

  handleEvent(list, e) {
    const { handleEvent } = this.props
    handleEvent(list, e)
  }

  render() {
    const { list, hideServerIcon, hideDistance } = this.props
    return list && (
      <View className='store-info' >
        <View className='icon-img'>
          {list.isNearest ? <Image src={nearIcon} className='store-tipe-icon'></Image> : null}
          {list.isNew ? <Image src={newIcon} className='store-tipe-icon'></Image> : null}
        </View>
        <View className={classnames('store-logo-wrap', {
          'show-tag': list.isInService && !hideServerIcon
        })}
        >
          <Image src={list.logo ? list.logo : tipsImg} className='store-logo'></Image>
        </View>
        <View className='store-content' onClick={() => Taro.navigateTo({ url: `/pages/store/detail/index?list=${JSON.stringify(list)}` })}>
          <View className='name'>{list.storeName}</View>
          <View className='address'>{list.address}</View>
					<View className='address'>{list.phone}</View>
        </View>
        {
          !hideDistance && (
            <View className='store-distance' onClick={(e) => this.handleEvent(list, e)}>
              <View className='text'>去养车</View>
              { list.distance && <View className='num'>{list.distance}</View>}
            </View>
          )
        }
      </View>
    )
  }
}
